<widget-modal widget-modal-title="Configure Code Repo Widget">
<form name="configForm"
	ng-submit="repoConfig.submit(configForm)"
	novalidate="novalidate">

	<form-group input="repoOption"
				class="text-center"
				errors="{required:'Please select a repository type'}">
		<label class="modal-label">Repo Type</label>

		<select name="repoOption"
				class="form-control text-center"
				ng-model="repoConfig.repoOption"
				ng-options="repoOption.value for repoOption in repoConfig.repoOptions"
				required>
			<option value="" disabled>Select a type</option>
		</select>
	</form-group>

	<form-group input="repoUrl"
				class="text-center"
				errors="{required:'Repository URL is required', url: 'Please enter a valid URL'}">

		<label class="modal-label">Repo URL</label>
		<input type="url"
			   name="repoUrl"
			   class="form-control text-center"
			   ng-model="repoConfig.repoUrl"
			   placeholder="Enter URL"
			   autocomplete="off"
			   required />
	</form-group>

	<form-group ng-if="repoConfig.repoOption.name == 'GitHub'  || repoConfig.repoOption.name == 'Bitbucket' || repoConfig.repoOption.name == 'Gitlab'"
				errors="{required:'Branch is required'}"
				input="gitBranch"
				class="text-center">

		<label class="modal-label" id="repoLabel">Branch</label>

		<input
			type="text"
			name="gitBranch"
			class="form-control text-center"
			ng-model="repoConfig.gitBranch"
			placeholder="Enter Branch"
			required />

	</form-group>

	<hr/>

	<form-group ng-if="repoConfig.repoOption.name != 'Gitlab'" input="repouser"
				errors="{}">

		<label class="modal-label">Credentials (Optional, required for private repos)</label>


		<strong class="pull-left">Username&nbsp;:&nbsp; </strong> <input type="text"
			   name="repouser"
			   class="form-control-inline text-center"
			   ng-model="repoConfig.repouser"
			   maxlength="25"
			   autocomplete="off"
			   placeholder="Enter your repo username"
				size="55"/>
	</form-group>
	<form-group ng-if="repoConfig.repoOption.name != 'Gitlab'" input="repopass"
				errors="{errorEncryptingPassword: 'Error encrypting password.'}">
		<strong class="pull-left">Password&nbsp;:&nbsp; </strong> <input type="password"
			   name="repopass"
			   class="form-control-inline text-center"
			   ng-model="repoConfig.repopass"
			   maxlength="100"
				autocomplete="new-password"
			   placeholder="Enter your repo password"
		size="55"/>
	</form-group>

	<label ng-if="repoConfig.repoOption.name == 'GitHub'" class="modal-label">(OR)</label>

	<form-group ng-if="repoConfig.repoOption.name == 'GitHub'" input="repoPersonalAccessToken"
				errors="{}">

		<label class="modal-label">Personal Access Token</label>

		<input type="password"
			   name="repoPersonalAccessToken"
			   class="form-control text-center"
			   ng-model="repoConfig.repoPersonalAccessToken"
			   maxlength="100"
			   autocomplete="new-password"
			   placeholder="Enter your Github personal access token"/>
	</form-group>

	<form-group ng-if="repoConfig.repoOption.name == 'Gitlab'" input="repokey"
				errors="{}">

		<label class="modal-label">API Key (Optional, required for private repos)</label>

		<input type="password"
			   name="repokey"
			   class="form-control text-center"
			   ng-model="repoConfig.repouser"
			   maxlength="25"
			   autocomplete="new-password"
			   placeholder="Enter your api key"/>
	</form-group>

	<div class="button-row row text-center">
		<button type="submit" class="btn btn-primary btn-wide">Save</button>
	</div>
</form>
</widget-modal>
